<template>
  <div>
       <div v-bind:class="{'active':isActive}">绑定class</div>
       <div  :class="{'active':isActive}">绑定class111</div>
       <div v-bind:class="{'active':isActive,'text-danger':hasError}">绑定class</div>
       <div v-bind:class="bindObj">bangding222</div>
       <div v-bind:class="[activeClass,hasErrorClass]">绑定333333333</div>
  </div>
</template>

<script>
export default{
  name:"BindDemo",
  data(){
    return{
      msg:"bind",
      isActive:true,
      hasError : false,
      bindObj:{
         active: true,
         'text-danger': false
      },
      activeClass:"active",
      hasErrorClass:"text-danger",
    }
  },
}

</script>

<style>
  .active {
  	width: 100px;
  	height: 100px;
  	background: green;
  }

  .text-danger {
  	background: red;
  }
</style>
